<template>
  
  <div class="head"></div>
      
      <router-link to="/smblack" class="avat">
      <img src="../assets/image/my-avatar.jpg" style="width: 50px;height: 50px;"/> 
        <spam style=""> 黎君</spam>
      
        <svg class="icon">
                    <use xlink:href="#icon-ziyuan"></use>
                  </svg>
               </router-link>
               <hr>
      
               
      
                 <svg class="icom">
                    <use xlink:href="#icon-kefu"></use>
                  </svg>
      
                  <svg class="icom" style="margin-left: 310px;">
                    <use xlink:href="#icon-shezhi"></use>
                  </svg>
            
      
   
        <div class="neck">
        <h3>0</h3>        <h3 style="margin-left: 10px;">0</h3>         <h3 style="margin-right: -8px;">0</h3>
        </div>
   
        <div class="word">
        <h3 >优惠券</h3>        <h3 style>钱包</h3>          <h3 >积分</h3>
        </div>
   
        <div class="heart"  >
         💎  您可享3项权益~  &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
         <spao>查看详情 &nbsp></spao>
        </div>
   
         <van-row gutter="20" class="mid">
            
     <van-col span="7" >🦆积分抵券</van-col>
     <van-col span="8" >🐖周二会员日</van-col>
     <van-col span="7" >🐓双倍积分</van-col>
         </van-row>
      
        <div class='menu'> 
    <router-link to="/payfor" class="all"><svg  style="margin-left: 250px;"><use xlink:href="#icon-daizhifu" width="30"></use></svg></router-link>
   <router-link to="/receipt" class="all"><svg   style="margin-left: 0px;"><use xlink:href="#icon-daishouhuo" width="30"></use></svg></router-link>
   <router-link to="/pickup" class="all"><svg  style="margin-left: 0px;"><use xlink:href="#icon-gouwudai" width="30"></use></svg></router-link>
   <router-link to="/refund" class="all"><svg  style="margin-left: 10px;"><use xlink:href="#icon-shouhou" width="30"></use></svg></router-link>
   <router-link to="/list" class="all"><svg  style="margin-left: 10px;"><use xlink:href="#icon-dingdanxiangqing-dingdanbianhao" width="25"></use></svg></router-link>
         </div>
   
         <van-row  class="wait" >
            <router-link to="/payfor" class="vip"><van-col span="4" >待支付</van-col></router-link>
               <router-link to="/receipt" class="vip"><van-col span="4" >待收货</van-col></router-link>
                  <router-link to="/pickup" class="vip"><van-col span="3" >待自提</van-col></router-link>
                     <router-link to="/refund" class="vip"><van-col span="4" >售后/退款</van-col></router-link>
                        <router-link to="/list" class="vip"><van-col span="4"  >全部订单</van-col></router-link>
         </van-row>
   
   
         <div class='leg'> 
   <svg class="icop"><use xlink:href="#icon-Purchasereconciliat" width="25"></use></svg>
   <svg class="icop"><use xlink:href="#icon-shangcheng" width="30"></use></svg>
   <svg class="icop"><use xlink:href="#icon-anquanzhongxin1" width="30"></use></svg>
   <svg class="icop"><use xlink:href="#icon-shezhi1" width="30"></use></svg>
         </div>
   
   
         <van-row  class="foot">
     <van-col span="4" >充值有礼</van-col>
     <van-col span="4" >积分商城</van-col>
     <van-col span="4" >安全中心</van-col>
     <van-col span="4">设置中心</van-col>
         </van-row>
   
         
         <div class='leg' style="margin-top:0px"> 
   <svg class="icop"><use xlink:href="#icon-wodeyouhuiquan" width="25"></use></svg>
   <svg class="icop"><use xlink:href="#icon-libao" width="30"></use></svg>
   <svg class="icop"><use xlink:href="#icon-kefu1" width="30"></use></svg>
   <svg class="icop"><use xlink:href="#icon-icon-test1" width="30"></use></svg>
         </div>
   
         <van-row  class="foot" style="margin-top:-20px">
     <van-col span="4" >优惠礼包</van-col>
     <van-col span="4" >积分福利</van-col>
     <van-col span="4" >客服中心</van-col>
     <router-link to="/address" style="margin-right:12px ;color:#2C3E50"><van-col span="4" >地址管理</van-col></router-link>
         </van-row>
         <TabBar :cart_badge="cartCount" />
</template>

<script setup>

import TabBar from  '../components/Tabbar.vue'
import { useStore } from 'vuex';
import { onMounted, computed } from "vue";

const store = useStore()
onMounted(() => {
  store.dispatch('fetchCartCount')
})
const cartCount = computed(() => store.state.cartCount)

</script>

<style scoped>
.head{
   height:20px;
   background: #F3F5F7;
   margin-left: 15px;
   margin-right: 15px; 
  
}

.avat{
   display: flex;
   flex-flow: row;
   margin-left:15px;
   margin-right: 15px; 
   background: #F3F5F7;  
}
.avat:active{
   color:gray
}

.icon{
   position: relative;
   width: 40px;
   height:40px;
   margin-left:10px;
   margin-top: 20px;
   

}
.icom{
   position:absolute;
   width: 30px;
   height:50px;
   margin-left:260px;
   margin-top: -60px;
   
}
.icoo{
   position:relative;
   width: 30px;
   height:50px;
   margin-left: 300px;
   
  
   
   
}

.icop{
  margin-left: 24px;
  
   
   
}
spam{
   position:absolute;
   margin-left:65px;
   margin-top: 5px;
   font-size: 16px;

}

.neck{
   position: relative;
   margin-top: 15px;
    height:40px;
    display: flex;
    justify-content:space-evenly;
    color:slategray;
    font-family:'小黑';
    font-size: 16px;
    
}
.word{
    position:relative;
    height:20px;
    display: flex;
    justify-content:space-evenly;
    color:dimgrey;
    margin-top: -20px;
    font-family: '黑体';
    font-size: 16px;

}
.heart{
   height:40px;
   position: relative;
   margin-top: 25px;
   background-color: white;
   color:dimgrey;
   margin-left: 15px;
   margin-right: 15px;
   font-size: 16px;
   padding: 15px;
   border-bottom:#F5E5C3;
   cursor: pointer;
   border-radius: 10px 10px 0 0;
  
}
.heart:active{
   background-color:#C8C9CC;
}

.look{
   position: relative;
   color:#F5E5C3;
   
   
     
}
.mid{
   background-color: white;
   position: relative;
   height:40px;
   display: flex;
   justify-content: space-evenly;
   font-size: 14px;
   color:dimgrey;
   padding-top: 10px;
   margin-left: 15px;
   margin-right: 15px; 
   border-radius: 0 0 10px 10px;
  
}
.all{
   position: relative;
   display: flex;
   justify-content: space-around;
   margin-left: -235px;
   
}

.menu{
   position: relative;
   margin-top: 10px;
   display: flex;
   height:100px;
   background-color: white;
   margin-left: 15px; 
   margin-right: 15px;   
   border-radius:  10px;
  
}
.wait{
   position: relative;
   margin-top: -30px;
   display: flex;
   justify-content: space-around;
   font-size: 10px;
   background-color: white;
   white-space:nowrap; 
   margin-left: 15px;
   margin-right: 15px; 
   border-radius:  10px;
}
.vip{
  color:black;
  display: flex;
  
  
 
}
.vip:active{
  color:darkgray
}

.leg{
   position: relative;
   margin-top: 30px;
   display: flex;
   height:80px;
   background-color: white;
   margin-left: 15px;
   margin-right: 15px; 
}
.foot{
   position:relative;
   margin-top: -22px;
   display: flex;
   justify-content: space-around;
   font-size: 10px;
   background-color: white;
   white-space:nowrap; 
   margin-left: 15px;
   margin-right: 15px; 
}

</style>